<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>我的交易轨迹 - 一指赢商城</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link type="text/css" href="http://400tcc.cn/WebApp/Home/View/Public/baofeng/css/public.css" rel="stylesheet" />
    <script src="http://400tcc.cn./Public/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="http://400tcc.cn/WebApp/Home/View/Public/baofeng/js/vue.min.js"></script>
    <script src="http://400tcc.cn/WebApp/Home/View/Public/baofeng/js/layer/layer.js"></script>
    <script src="http://400tcc.cn/WebApp/Home/View/Public/baofeng/js/public.js?v=80"></script>
    <link type="text/css" href="http://400tcc.cn/WebApp/Home/View/Public/baofeng/js/layer/need/layer.css" rel="stylesheet" />
    <style>body { padding-bottom: 70px; }</style>
    <link type="text/css" href="http://400tcc.cn/WebApp/Home/View/Public/baofeng/css/order.css" rel="stylesheet" />
</head>

<body>
<div class="loader">
    <div class="act">
        <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </div>
    <div class="bg"></div>
</div>
<link href="http://400tcc.cn./Public/plugins/swiper/swiper-3.3.1.min.css" rel="stylesheet" />
<script src="http://400tcc.cn./Public/plugins/swiper/swiper-3.3.1.jquery.min.js"></script>
<script>
    var vue;
    $(function () {
        vue = new Vue({
            el: '#rw_record',
            data: {
                more_btn_str: '点击加载更多',
                data: null,
            },
            methods: {
                init: function () {
                    this.showTab(0);
                },
                showTab: function (index) {
                    this.data = null;
                    this.getData(index,1);
                },
                getData: function (index,page) {
                    var PageSize = 20;
                    var StartIndex = page;
                    var self = this;
                    loadshow();
                    postMsg('http://400tcc.cn/order/orderList', { 'page': StartIndex, 'pageSize': PageSize, 'isModel':1, type:0, state:index }, function (data) {
                        loadhide();
                        if(data.success == 1) {
                            for (var i = 0; i < data.data.length; i++) {
                                //数据处理
                                // data.data[i].close_time = getLocalTime(data.data[i].end_time.replace(/-/g, "/")).substr(5);
                                data.data[i].open_time = getLocalTime(data.data[i].begin_time.replace(/-/g, "/")).substr(5);
                                data.data[i].OpenPrice = data.data[i].open_price;
                                if (data.data[i].state == 0) {
                                    data.data[i].Profit = "持仓中";
                                } else {
                                    data.data[i].Profit = parseFloat(data.data[i].gain_price).toFixed(2);
                                }
                                data.data[i].Amount = parseFloat(data.data[i].order_price).toFixed(2);
                                data.data[i].Profit2 = (parseFloat(data.data[i].gain_price) + parseFloat(data.data[i].real_price)).toFixed(2);
                                data.data[i].tab_state = "tab_state_close";
                                data.data[i].c_tab_state = "c_tab_state_close";
                            }
                        }
                        data.page = page;
                        data.end_page = data.totals / PageSize;
                        if (self.data != null) {
                            data.data = self.data.data.concat(data.data);
                        }
                        self.data = data
                    })
                },
                nextPage: function (index) {
                    this.getData(index, this.data.page + 1);
                },
                getLocalTime: function (str) {
                    return getLocalTime(str).replace(' ','<span>')+"</span>"
                },
                show_child_tab: function (i) {
                    if (this.data.data[i].tab_state == 'tab_state_close') {
                        this.data.data[i].tab_state = "tab_state_open";
                        this.data.data[i].c_tab_state = "c_tab_state_open";
                    } else {
                        this.data.data[i].tab_state = "tab_state_close";
                        this.data.data[i].c_tab_state = "c_tab_state_close";
                    }
                }
            }
        })
        vue.init();
        setTab('#tabs-container', ".tab");
    })

    function setTab(id, tab) {
        var tabsSwiper = new Swiper(id, {
            speed: 500,
            slide:0.5,
            onSlideChangeEnd: function () {
            },
            onSlideChangeStart: function () {
                vue.showTab(tabsSwiper.activeIndex)
                $(tab + " .active").removeClass('active')
                $(tab + " a").eq(tabsSwiper.activeIndex).addClass('active')
            },

        })
        $(tab + " a").on('touchstart mousedown', function (e) {
            e.preventDefault()
            $(tab + " .active").removeClass('active')
            $(this).addClass('active')
            tabsSwiper.slideTo($(this).index())
        })
        $(tab + " a").click(function (e) {
            e.preventDefault()
        })
    }
</script>
<div id="rw_record" class=" bill-details">
    <div class="head-menu head-record uk-block  uk-block-default tab">
        <a href="#" class="active">持仓明细</a><a href="#">今日成交</a><a href="#">历史成交</a>
    </div>
    <div id="tabs-container" class="swiper-container swiper-container-horizontal">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-active" v-for="page in [0,1,2]">
                <div class="list-bill style2 uk-block" >
                    <table v-bind:class="item.tab_state" v-for="(index, item) in data.data">
                        <tr class="thead" @click="show_child_tab(index)">
                            <td width="33%"><span class="text-red" v-if="item.type==1" style="border:1px solid #f45b36;width:40px;text-align:center;border-radius:3px;">看涨</span><span class="text-green" v-if="item.type==2" style="border:1px solid #2eb646;width:40px;text-align:center;border-radius:3px;">看跌</span></td>
                            <td width="33%">持有</td>
                            <td width="33%" class="txt_right">盈亏</td>
                            <td rowspan="2" width="30px"><i class="right_attrs"></i></td>
                        </tr>
                        <tr class="tbody" @click="show_child_tab(index)">
                            <td>{{item.show_name}}</td>
                            <td>{{item.mun}}</td>
                            <td class="txt_right">
                                <span class="text-red" v-if="item.state==1">+{{item.Profit}}</span>
                                <span class="text-green" v-if="item.state==2">{{item.Profit}}</span>
                                <span v-if="item.state==3 || item.state==0">{{item.Profit}}</span>
                            </td>
                        </tr>
                        <tr v-bind:class="item.c_tab_state" >
                            <td colspan="3" class="child_tab" style="border-top:1px solid #e1e1e1;">
                                <table style="width:100%;" v-bind:class="item.tab_state">
                                    <tr v-if="item.fee_money > 0">
                                        <td style="padding-left:0px;">手续费</td>
                                        <td>{{item.fee_money}}元</td>
                                    </tr>
                                    <tr>
                                        <td style="padding-left:0px;">建仓价格</td>
                                        <td>{{item.open_price}}元</td>
                                    </tr>
                                    <tr v-if="item.close_price > 0">
                                        <td style="padding-left:0px;">平仓价格</td>
                                        <td>{{item.close_price}}元</td>
                                    </tr>
                                    <tr v-if="item.end_time != null">
                                        <td style="padding-left:0px;">平仓时间</td>
                                        <td>{{item.end_time}}</td>
                                    </tr>
                                    <tr>
                                        <td style="padding-left:0px;">购买方式</td>
                                        <td>现金</td>
                                    </tr>
                                    <tr>
                                        <td style="padding-left:0px;">定金</td>
                                        <td>{{item.order_price}}</td>
                                    </tr>
                                </table>
                            </td>
                            <td style="border-top:1px solid #e1e1e1;"></td>
                        </tr>
                    </table>
                    <a class="bottom_more" @click="nextPage()" v-if="data.end_page>data.page">{{more_btn_str}}</a>
                    <a class="bottom_no_more" v-if="data.end_page<=data.page">没有更多了~</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>